$(function() {
	var list = new Array();
	$("#materialList").val("");
	$("#inputProductPrice").val(0);
	// 循环获得json的原始菜品数据
	if (foodMaterialList != null && foodMaterialList != ""
			&& foodMaterialList != "[]") {
		// String不能直接循环， 要先转成json
		var arr = JSON.parse(foodMaterialList);
		
		// 循环获得json的原始菜品数据
		$.each(arr,
				function(index, content) {
					list.push(new Material(content.id, content.materialId,
							content.material.materialName,
							content.materialQuantity, content.material.unitId,
							content.material.unit.unitName,
							content.material.materialPrice,
							content.material.materialPrice
									* content.materialQuantity));
				});
		updateTotalPrice();
		$("#materialList").val(JSON.stringify(list));
	}

	// 菜品对应的原料的数据绑定
	var foodMaterialVue = new Vue({
		el : '#foodMaterialData',
		data : {
			items : list
		},
		methods : {
			onclick : function(material, num) {
				openDeleteFoodMaterialConfirm(material, num);
			}
		}
	});

	var chooseMaterialBox;

	$("#chooseMaterialButton").on("click", function() {
		openChooseMaterial();
	});

	// 单位向量的数据绑定
	var unitVue = new Vue({
		el : '#inputUnitId',
		data : {
			selected : unitId,
			options : null
		},
		beforeCreate : function() {
			var _self = this;
			$.get(SERVER_PRE_URL + "unit/getAllUnitAjax", function(data) {
				_self.options = data;
			});
		}
	});

	// 菜系的数据绑定
	var classificationVue = new Vue({
		el : '#inputClassificationId',
		data : {
			selected : classificationId,
			options : null
		},
		beforeCreate : function() {
			var _self = this;
			$.get(SERVER_PRE_URL + "classification/getAllClassificationAjax",
					function(data) {
						_self.options = data;
					});
		}
	});

	function openChooseMaterial() {
		chooseMaterialBox = layer.open({
			type : 2,
			offset : '10%',
			maxmin : true,
			title : '选择原料',
			area : [ '85%', '85%' ],
			btn : [ '确认', '取消' ] // 只是为了演示
			,
			yes : function() {
				var childBox = layer.getChildFrame('body', chooseMaterialBox);
				var m = childBox.find("#materialList").val();

				// 更新选择数据
				if (m != "") {
					m = eval('(' + m + ')');
					for ( var i in m) {
						list.push(m[i]);
					}
					Vue.set(foodMaterialVue, "items", list);
					updateTotalPrice();
				}

				$("#materialList").val(JSON.stringify(list));
				layer.close(chooseMaterialBox);
			},
			btn2 : function() {
				layer.close();
			},
			shadeClose : true, // 点击遮罩关闭
			content : JSP_PRE_URL + 'chooseMaterial'
		});
	}

	function openDeleteFoodMaterialConfirm(material, num) {
		layer.confirm('确认删除:' + material.materialName, {
			btn : [ '确认', '取消' ]
		// 按钮
		}, function() {
			layer.msg('删除成功!');
			list.splice(num, 1);
			updateTotalPrice();
			$("#materialList").val(JSON.stringify(list));
			Vue.set(foodMaterialVue, "items", list);
		}, function() {

		});
	}

	function updateTotalPrice() {
		var price = 0;
		for ( var i in list) {
			price = price + list[i].totalPrice;
		}

		$("#inputProductPrice").val(price);
	}

	function Material(id, materialId, materialName, materialQuantity, unitId,
			unitName, materialPrice, totalPrice) {
		this.id = id;
		this.materialId = materialId;
		this.materialName = materialName;
		this.materialQuantity = materialQuantity;
		this.unitId = unitId;
		this.unitName = unitName;
		this.materialPrice = materialPrice;
		this.totalPrice = totalPrice;

	}

	function getAllClassification(classificationVue) {
		$.ajax({
			type : "GET", // 提交方式
			url : SERVER_PRE_URL + "classification/getAllClassificationAjax",// 路径
			success : function(classificationList) {// 返回数据根据结果进行相应的处理

				Vue.set(classificationVue, "options", classificationList);
			}
		});
	}

	function getAllUnit(unitVue) {
		$.ajax({
			type : "GET", // 提交方式
			url : SERVER_PRE_URL + "unit/getAllUnitAjax",// 路径
			success : function(unitList) {// 返回数据根据结果进行相应的处理

				Vue.set(unitVue, "options", unitList);
			}
		});
	}

});
